<template>
  <div class="table-section">
    <el-table
      v-loading="loading"
      :data="data"
      border
      stripe
      element-loading-text="加载中..."
      style="width: 100%;height: 100%"
      height="100%"
    >
      <el-table-column
        label="序号"
        width="50"
        type="index"
      />
      <el-table-column
        prop="date"
        label="实际上课日期"
        sortable
      >
        <template #default="{row}">
          <span>{{ row.actualStartTime ? row.actualStartTime.substring(0, 10) : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="courseType"
        label="课程类型"
        sortable
      />
      <el-table-column
        prop="courseDurationTypeName"
        label="时长类型"
        sortable
      />
      <el-table-column
        prop="actualClassTime"
        label="实际课程时长"
        sortable
      />
<!--      <el-table-column-->
<!--        prop="studentName"-->
<!--        label="上课学生"-->
<!--        sortable-->
<!--      />-->
      <el-table-column
        prop="actualStartTime"
        label="实际开始时间"
        sortable
      >
        <template #default="{row}">
          <span>{{ row.actualStartTime ? row.actualStartTime.substring(11, 16) : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="actualEndTime"
        label="实际结束时间"
        sortable
      >
        <template #default="{row}">
          <span>{{ row.actualEndTime ? row.actualEndTime.substring(11, 16) : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="studiedWordNum"
        label="所学单词数"
        sortable
      />
      <el-table-column
        prop="status"
        label="状态"
        sortable
      >
        <template #default="{row}">
          <el-tag
            :type="getStatusTagType(row.status)"
            size="small"
          >
            {{ getClassStatus(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="score"
        label="评分"
        sortable
      >
        <template #default="{row}">
          <div class="score-stars">
            <i
              v-for="n in 5"
              :key="n"
              class="fas fa-star"
              :class="{ 'filled': n <= rateNum(row) }"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="120"
      >
        <template #default="{row}">
          <el-button
            :disabled="row.status === '1'||row.status === '4'"
            size="mini"
            type="text"
            @click="gotoPage('打印',row)"
          >
            打印
          </el-button>
          <el-button
            :disabled="row.status === '1'||row.status === '4'"
            size="mini"
            type="text"
            @click="gotoPage('课后寄语',row)"
          >
            课后寄语
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'ClassHistoryTable',
  props: {
    data: {
      type: Array,
      required: true,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 根据状态获取标签类型
    getStatusTagType(status) {
      switch (status) {
        case '3':
          return 'success'
        case '1':
        case '4':
          return 'danger'
        case '2':
          return 'warning'
        default:
          return 'default'
      }
    },
    getClassStatus(status) {
      switch (status) {
        case '3':
          return '已完成'
        case '1':
          return '已取消'
        case '4':
          return '途中取消'
        case '2':
          return '上课中'
        default:
          return '未知'
      }
    },
    gotoPage(name, row) {
      if (name === '课后寄语') {
        window.open(
          `${window.location.origin}${window.location.pathname}#/afterClass?cid=${row.courseId}`,
          '_blank',
          'width=600,height=800,top=100,left=200'
        )
      } else if (name === '打印') {
        window.open(
          `${window.location.origin}${window.location.pathname}#/print?cid=${row.courseId}`)
      }
    },
    rateNum(row) {
      return row.rate ? row.rate.split(',')[5] * 1 : 5
    }
  }
}
</script>

<style scoped>
.table-section {
  flex: 1;
  overflow-y: auto;
}

.pagination-container {
  margin-top: 16px;
  text-align: right;
}

/* 评分星星 */
.score-stars {
  color: #ddd;
  font-size: 14px;
}

.score-stars .filled {
  color: #e6a23c;
}

::v-deep .el-table {
  height: calc(100vh - 380px) !important;
  min-height: 300px;
}
</style>
